<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../../scripts/vue.js"></script>
  <style type="text/css"></style>
  <link rel="stylesheet" href="js/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-table/dist/bootstrap-table.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css">
  <link href="js/bower_components/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

  <script src="js/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="js/bower_components/bootbox.min.js"></script>
  <script src="js/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
  <script src="js/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
  <script src="js/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
  <script src="js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

  <script src="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
  <script src="js/bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
  <script src="js/bower_components/moment/min/moment-with-locales.min.js"></script>
  <script src="js/bower_components/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
  <script>
    $(function() {
      $("#btnSave").click(function(){
        console.log("进入保存表单数据方法");
        console.log($("#dateCreraTime").val());

        users = {
          'userName': $("#userName").val(),
          'password': $("#password").val()
        }

        console.log("获取表单数据如下" + users);
        $.ajax({
          type: 'put',
          dataType: 'json',
          data: JSON.stringify("users"),
          contentType: "application/json;charset=utf-8",
          url: "http://localhost:8801/myUser/addUser",
          success: function(res){
            console.log("保存信息后返回的数据如下：");
            console.log(res);
            if (res > 0) {
              alert("保存数据成功");
              location.reload();
              qingKong()
            }
          }
        })
      });

      $("#btnUpdate").click(function(){
        console.log("进入修改保存表单数据方法");

        users = {
          'userId': $("#userId").val(),
          'userName': $("#userName").val(),
          'password': $("#password").val()
        }

        console.log("获取表单数据如下" + users);
        $.ajax({
          type: 'put',
          dataType: 'json',
          data: JSON.stringify("users"),
          contentType: "application/json;charset=utf-8",
          url: "http://localhost:8801/myUser/updateUser",
          success: function(res){
            console.log("修改保存信息后返回的数据如下：");
            console.log(res);
            if (res > 0) {
              alert("保存数据成功");
              location.reload();
              qingKong()
            }
          }
        })
      })
    })

    function qingKong() {
      console.log("保存信息后清空控件");
      $("#userName").val("");
      $("#password").val("");
    }
  </script>
</head>
<body>
  <div class="modal-dialog">
    <div class="modal-content" style="width: 400px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"><label id="modalName">新增用户信息</label></h4>
      </div>
      <div class="modal-body form-inline">
        <div class="form-group">
          <label class="control-label" for="userName">账号：</label>
          <input style="width: 220px;" class="form-control" type="text" id="userName">
        </div>
        <div class="form-group">
          <label class="control-label" for="password">密码：</label>
          <input style="width: 220px;" class="form-control" type="text" id="password" required="requires">
        </div>
        <div class="from-group">
          <label class="control-label" for="beginDate">启动时间：</label>
          <input style="width: 220px" class="from_datetime" type="text" id="beginDate" readonly>
        </div>
        <br />
        <br />
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="btnSave">保存</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>